<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证表单信息</title>
<style type="text/css">
#form1 div {
	width: 500px;
	height: 30px;
}

#form1 div h5 {
	width: 200px;
	margin-right: 10px;
	display: inline;
	text-align: right;
}

#form1 div div {
	width: 400px;
	display: inline;
	margin-right: 10px
}

#form1 div span {
	color: red;
}
</style>
<script>
	function checkSuser() {
		var suser = document.all.suser.value;
		var span = document.getElementById("suserSpanId");
		var regex = /^\w{3,}$/;
		if (!regex.test(suser)) {
			span.innerHTML = "<img src='img/error.png' />用户名必须是英文字母或数字或者下划线并且是3个字符以上！";
			span.style.color = "red";
			return false;
		}
		span.innerHTML = "<img src='img/ok.gif' />";
		span.style.color = "green";
		return true;
	}
	function checkPswd() {
		var pswd = document.all.pswd.value;
		var span = document.getElementById("pswdSpanId");
		var regex = /^\w{3,}$/;
		if (!regex.test(pswd)) {
			span.innerHTML = "<img src='img/error.png' />请输入长度大于等于3个字符的密码！";
			span.style.color = "red";
			return false;
		}
		span.innerHTML = "<img src='img/ok.gif'/>";
		span.style.color = "green";
		return true;
	}

	function checkConfPswd() {
		var pswd = document.all.pswd.value;
		var confPswd = document.all.confPswd.value;
		var span = document.getElementById("confPswdSpanId");
		if (pswd == "") {
			span.innerHTML = "<img src='img/error.png' />密码不能为空！";
			span.style.color = "red";
			return false;
		}
		if (confPswd == "") {
			span.innerHTML = "<img src='img/error.png' />确认密码不能为空！";
			span.style.color = "red";
			return false;
		}
		if (confPswd != pswd) {
			span.innerHTML = "<img src='img/error.png' />密码必须一致";
			span.style.color = "red";
			return false;
		}
		span.innerHTML = "<img src='img/ok.gif' />";
		span.style.color = "green";
		return true;
	}

	function checkSname() {
		var sname = document.all.sname.value;
		var span = document.getElementById("snameSpanId");
		var regx = /^\w{1,15}/;
		if (!regx.test(sname)) {
			span.innerHTML = "<img src='img/error.png' />请输入姓名，长度小于15！";
			span.style.color = "red";
			return false;
		}
		span.innerHTML = "<img src='img/ok.gif' />";
		span.style.color = "green";
		return true;
	}
	function checkSsex() {
		var ssex = document.getElementsByName("ssex");
		var span = document.getElementById("ssexSpanId");
		for (var i = 0; i < ssex.length; i++) {
			if (ssex[i].checked) {
				span.innerHTML = "<img src='img/ok.gif' />";
				span.style.color = "green";
				return true;
			}
		}
			span.innerHTML = "<img src='img/error.png' />请选择性别";
			span.style.color = "red";
			return false;
	}

	function checkDbrith() {
		var dbrith = document.all.dbrith.value;
		var span = document.getElementById("dbrithSpanId");
		if (dbrith == "") {
			span.innerHTML = "<img src='img/error.png' />出生日期不能为空！";
			span.style.color = "red";
			return false;
		}
		span.innerHTML = "<img src='img/ok.gif' />";
		span.style.color = "green";
		return true;
	}

	function checkSemail() {
		var semail = document.all.semail.value;
		var span = document.getElementById("semailSpanId");
		regx = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
		if (!regx.test(semail)) {
			span.innerHTML = "<img src='img/error.png '/>请输入正确的邮箱！";
			span.style.color = "red";
			return false;
		}
		span.innerHTML = "<img src='img/ok.gif' />";
		span.style.color = "green";
		return true;
	}

	function checkSphone() {
		var sphone = document.all.sphone.value;
		var span = document.getElementById("sphoneSpanId");
		var s = /^\d{11}$/;

		if (!s.test(sphone)) {
			span.innerHTML = "<img src='img/error.png' />请输入正确的电话号码";
			span.style.color = "red";
			return false;
		}
		span.innerHTML = "<img src='img/ok.gif' />";
		span.style.color = "green";
		return true;
	}

	function checkSaddress() {
		var saddress = document.all.saddress.value;
		var span = document.getElementById("saddressSpanId");
		regx = /^\w{1,100}$/;
		if (!regx.test(saddress)) {
			span.innerHTML = "<img src='img/error.png' />输入地址长度小于100";
			span.style.color = "red";
			return false;
		}

		span.innerHTML = "<img src='img/ok.gif' />";
		span.style.color = "green";
		return true;
	}

	function checkScode() {
		var scode = document.all.scode.value;
		var span = document.getElementById("scodeSpanId");
		var s = /^\d{6}$/;
		if (!s.test(scode)) {
			span.innerHTML = "<img src='img/error.png' />请6位数字的邮箱";
			span.style.color = "red";
			return false;
		}
		span.innerHTML = "<img src='img/ok.gif' />";
		span.style.color = "green";
		return true;
	}

	function checkForm() {
		var suserFlag = checkSuser();
		var pswdFlag = checkPswd();
		var confPswdFlag = checkConfPswd();
		var snameFlag = checkSname();
		var ssexFlag = checkSsex();
		var dbirthFlag = checkDbrith();
		var semailFlag = checkSemail();
		var sphoneFlag = checkSphone();
		var saddressFlag = checkSaddress();
		var scodeFlag = checkScode();
		var flag = suserFlag && pswdFlag && confPswdFlag && snameFlag
				&& ssexFlag && dbirthFlag && semailFlag && sphoneFlag
				&& saddressFlag && scodeFlag;
		return flag;
	}
</script>
</head>

<body>
	<div
		style="width:500px; margin:50px auto;background-color:silver;padding: 20px 50px;">
		<form action="RegServlet" method="post" name="form1" id="form1" onsubmit="return checkForm();">
			<div>
				<h5>用 户 名:</h5>
				<div>
					<input type="text" name="suser" id="" value="zhangsan" />
				</div>
				<span id="suserSpanId">*</span>
			</div>
			<div>
				<h5>密&nbsp;&nbsp;码:</h5>
				<div>
					<input type="password" name="pswd" value="123456" />
				</div>
				<span id="pswdSpanId">*</span>
			</div>
			<div>
				<h5>确认密码:</h5>
				<div>
					<input type="password" name="confPswd" value="123456" />
				</div>
				<span id="confPswdSpanId">*</span>
			</div>
			<div>
				<h5>真实姓名:</h5>
				<div>
					<input type="text" name="sname" value="zhangsan" />
				</div>
				<span id="snameSpanId">*</span>
			</div>
			<div>
				<h5>性&nbsp;&nbsp;别:</h5>
				<div>
					<input type="radio" name="ssex" value="男" style="width: 52px; " />
					男 <input type="radio" name="ssex" value="女" style="width: 52px; " />女
				</div>
				<span id="ssexSpanId">*</span>
			</div>

			<div>
				<h5>出生日期:</h5>
				<div>
					<script src="My97DatePicker/WdatePicker.js"></script>
					<input type="text" name="dbrith" class="Wdate"
						onClick="WdatePicker();" />
				</div>
				<span id="dbrithSpanId">*</span>
			</div>
			<div>
				<h5>电子邮箱:</h5>
				<div>
					<input type="text" name="semail" value="www.xc@vv.com" />
				</div>
				<span id="semailSpanId">*</span>
			</div>
			<div>
				<h5>电话号码:</h5>
				<div>
					<input type="text" name="sphone" value="15880270983" />
				</div>
				<span id="sphoneSpanId">*</span>
			</div>
			<div>
				<h5>地&nbsp;&nbsp;址:</h5>
				<div>
					<input type="text" name="saddress" value="ssfa" />
				</div>
				<span id="saddressSpanId">*</span>
			</div>
			<div>
				<h5>邮&nbsp;&nbsp;编:</h5>
				<div>
					<input type="text" name="scode" value="123456" />
				</div>
				<span id="scodeSpanId">*</span>
			</div>
			<input class="submit" type="submit" value="提交" />
		</form>
	</div>
</body>
</html>